<html>
    <head>
    <style>
    body {
        background-color:#FFFFFF;
        font: "arial";
        color: #102C49;
        font-size:18px;
    }
    .board{
        position:absolute;
        top:0;
        left:0;
        background-color: #F9F9F9;
        width:500px;
        height:500px;
    }
    img {
        position:absolute;
        width:15px;
        height:15px;
    }
    </style>
</head>


<script type="text/javascript">

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  C L A S S

    function ClassBall( id , left , top  , x,y , weight ) {
        this.id = id;
        this.leftPolarity=1;
        this.polarity=1;
        this.gravity=0;
        this.top=top;
        this.left=left;
        this.roof=1;
        this.weight = weight;

        // S T A T I C
        document.write("<img id='ball_" + this.id + "' src='ball2.gif' style='left: "+left+"px; top: "+top+"px;'>");

        this.move = function ( ) {
            document.title = this.top;  //debug

            this.gravity = (parseInt(this.top)/100)*3+ this.weight ;
            this.top     = this.top  + ( this.gravity * this.polarity ) ;

            this.left = this.left + (1 * this.leftPolarity);

            document.getElementById("ball_"+this.id).style.top = ""+ this.top +"px";
            document.getElementById("ball_"+this.id).style.left = ""+ this.left +"px";

            this.colision();
        }
        
        this.colision = function( ) {
            
            if ( this.top  > 500 ) { this.polarity = this.polarity * -1; }
            
            if ( this.top  < this.roof ) { 
                this.top = this.roof + 1 ;
                //this.roof = this.roof +9 ;

                this.polarity = this.polarity * -1; 
            }

            if (this.left>500) { this.leftPolarity = -1; }
            if (this.left<000) { this.leftPolarity =  1; }
        }

    }

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  M A I N 

    var totalBalls = 8;
    var arrBalls = [];

    for (n=0; n<totalBalls; n++) {
        var objBall = new ClassBall( n , rnd(500),rnd(100) , 1,1 , rnd(3));
        arrBalls[n]=objBall;
    }
    
    thread();

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  F U N C T I O N S 
    function rnd(n){
        return Math.random()*n;
    }

    function thread(){
        for (n=0; n<totalBalls; n++)  
             arrBalls[n].move();
        setTimeout( "thread()" , 20 );
    }
    
    </script>

<body>
</body>

</html>